<template>
  <div style="width: 80%; padding: 10px">
    <el-form ref="ruleFormRef" :model="form" label-width="120px" :rules="rules">
      <el-form-item label="Activity name">
        <FIInput v-thousands v-model="form.name" />
      </el-form-item>
      <el-form-item label="Activity zone">
        <FISelect
          placeholder="请选择工序"
          v-model="form.region"
          v-model:key-word="keyWord"
          :options="stepList"
          labelCustom="materialName"
          multiple
          showSearch
          valueCustom="id"
          @current-change="currentChange"
          isShowPagination
          :paginationOption="paginationOption"
        />
      </el-form-item>
      <el-form-item label="Activity name">
        <FIDatePicker v-model="form.date1" type="month" placeholder="Pick a date" />
      </el-form-item>
      <el-form-item label="Activity time">
        <el-col :span="11">
          <el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
        </el-col>
        <el-col :span="2" class="text-center">
          <span class="text-gray-500">-</span>
        </el-col>
        <el-col :span="11">
          <el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
        </el-col>
      </el-form-item>
      <el-form-item label="Instant delivery">
        <el-switch v-model="form.delivery" />
      </el-form-item>
      <el-form-item label="Activity type">
        <el-checkbox-group v-model="form.type">
          <el-checkbox label="Online activities" name="type" />
          <el-checkbox label="Promotion activities" name="type" />
          <el-checkbox label="Offline activities" name="type" />
          <el-checkbox label="Simple brand exposure" name="type" />
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Resources">
        <el-radio-group v-model="form.resource">
          <el-radio label="Sponsor" />
          <el-radio label="Venue" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Activity form">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, watchEffect } from 'vue'
import FISelect from '@/components/FISelect/index.vue'
import FIInput from '@/components/FIInput.vue'
import FIDatePicker from '@/components/FIDatePicker.vue'
import data from './data.json'
import data1 from './data1.json'
import { FormInstance } from 'element-plus'
import { debounce } from '@/utils/common'
import { phone } from '@/utils/validate'
const ruleFormRef = ref<FormInstance>()

const keyWord = ref()

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})
const rules = {
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
}

const paginationOption = ref({
  pageSize: 6, // 每页显示条数
  currentPage: 1, // 当前页
  pagerCount: 7, // 按钮数，超过时会折叠
  total: 0, // 总条数
})
const stepList = ref([])

onMounted(() => {
  getList({ pageNum: 1, keyWord: '' })
})

const getList = debounce(async (params) => {
  let res
  if (params.pageNum === 1) {
    res = await data
  } else {
    res = await data1
  }
  if (res.success) {
    stepList.value = res.data.records
    paginationOption.value.total = res.data.total
  }
}, 500)

watch(keyWord, (newVal, oldVal) => {
  paginationOption.value.currentPage = 1
  getList({ pageNum: 1, keyWord: newVal })
})

// 切换分页
const currentChange = (pageNum: any) => {
  getList({ pageNum, keyWord: keyWord.value })
}

const submitForm = () => {
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
